const path = require("path");
// 导入ESLint插件
const ESLintPlugin = require("eslint-webpack-plugin");
//导入 html 插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//导入提取 css 的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//导入压缩 css 的插件
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
//导入压缩 JS 的插件
const TerserPlugin = require("terser-webpack-plugin");
//暴露对象
module.exports = {
    //入口
    entry: "./src/index.js",
    //出口
    output: {
        //输出的文件夹路径
        path: __dirname + "/../build", //所有资源的输出路径
        // path: path.resolve(__dirname, '../build'), //所有资源的输出路径
        //输出的文件路径
        filename: "js/bundle-[contenthash:8].js",  //JS 文件内容不变, 则最终的 hash 值也不变
        //清理打包文件夹
        clean: true,
        // 设置引入打包文件的基础路径，默认是相对路径
        publicPath: '/'
    },
    //模式
    mode: "production",
    //设置loader
    module: {
        //规则
        rules: [
            {
                //测试
                test: /\.css$/, //正则表达式
                //使用
                use: [
                    MiniCssExtractPlugin.loader, // 抽离css资源
                    "css-loader", // css 文件转为 commonJS 模块
                    'postcss-loader'
                ],
            },
            //less 规则
            {
                test: /\.less$/,
                // loader 的使用是自下而上的
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    'postcss-loader',
                    "less-loader", // 将 less 文件编译为 css
                ],
            },
            //js  babel语法转换
            {
                test: /\.js$/,
                exclude: /node_modules/, // 不进行处理的文件夹
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    useBuiltIns: "usage", // 只打包使用的ES6新API的实现代码
                                    corejs: { version: 2 }, // 指定core-js的版本号为2
                                },
                            ],
                        ], // 指定bebel预设包
                        plugins: [], // 指定babel插件包
                    },
                },
            },
            //图片资源的处理
            {
                test: /\.(jpg|png|gif)$/,
                type: "asset", // 资产
                // 解析器    base64 编码方式
                parser: {
                    // 指定进行图片base64编码最大文件大小
                    dataUrlCondition: {
                        maxSize: 5 * 1024, // 5kb    默认8k
                    },
                },
                // 打包生成的文件
                generator: {
                    filename: "images/[hash:8][ext]",
                },
            },
            //html 规则
            {
                test: /\.(html)$/,
                use: {
                    loader: "html-loader",
                },
            },
            //字体文件的规则
            {
                test: /\.(eot|svg|woff|woff2|ttf)$/,
                type: "asset",
                // 解析器
                parser: {
                    // 指定进行base64编码最大文件大小
                    dataUrlCondition: {
                        maxSize: 5 * 1024, // 5kb
                    },
                },
                generator: {
                    filename: "fonts/[hash:8][ext]",
                },
            },
        ],
    },
    //插件
    // 配置进行ESlint检查的插件
    plugins: [
        new ESLintPlugin(),
        // 2. 配置打包HTML的插件
        new HtmlWebpackPlugin({
            template: "./public/index.html", // 指定html模板文件。
            inject: "body", // 将打包生成的JS文件放置在body尾部
            hash: true, // 在引入JS时增加hash后缀字符串,去除缓存。
            minify: {
                removeAttributeQuotes: true, // 移除属性中的双引号
                removeComments: true, // 移除注释
                collapseWhitespace: true, // 去除空格与换行
            },
        }),
        // 3. 配置插件 提取css的插件
        new MiniCssExtractPlugin({					
            filename: "css/[contenthash:8].css",
        }),
    ],
    //在优化配置中指定插件来压缩CSS
    //optimization 优化
    optimization: {
        minimizer: [new CssMinimizerPlugin(), new TerserPlugin()],
    },
};
